<template>
	<div>
		<div class="swiper">
			<div class="swiper-slide" v-for="(item,index) in gallery" v-show="current==index" :key="item">
				<img :src="item" alt="" width="100%">
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		//接收数据
		data() {
			// current当前显示第几页
			return {
				current: 0,
				gallery: [
					"http://www.wuzhen.com.cn/uploads/summary/2018051618594522850.jpg",
					"http://www.wuzhen.com.cn/uploads/summary/2018051618594522850.jpg",
					"http://www.wuzhen.com.cn/uploads/summary/2018042016355444297.jpg",
					"http://www.wuzhen.com.cn/uploads/summary/2018110109053169919.jpg"
				]
			}
		},
		methods: {
			//自动播放
			auto() {
				setInterval(() => {
					// 让current++ 图片也就++
					this.current++;
					if (this.current >= this.gallery.length) {
						this.current = 0
					}
				}, 5000)
			},
		},
		created() {
			// 当vue创建完毕,调用auto
			this.auto();
		}
	}
</script>

<style>
</style>
